import React, { useEffect, useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import "codemirror/addon/display/autorefresh";
import "codemirror/addon/comment/comment";
import "codemirror/addon/edit/matchbrackets";
import "codemirror/keymap/sublime";
import "codemirror/theme/monokai.css";

let start = new Date().getTime();
export default () => {
	const [code, setCode] = useState("console.log('hello world')");

	useEffect(() => {
		const now = new Date().getTime();
		if (now - start >= 1000) {
			console.log(code);
		}
	}, [code]);

	return (
		<CodeMirror
			value={code}
			height="200px"
			options={{
				theme: "monokai",
				keyMap: "sublime",
				mode: "jsx",
			}}
			onChange={(e) => setCode(e)}
		/>
	);
};
